<!doctype html>
<html>
 <head lang="en">
  <meta charset="UTF-8">
  <title>仿京东左侧菜单</title>
  <link href="css/style.css" rel="stylesheet"/>
 </head>
 <body>
	<div class="nav-box">
		<div class="nav-top"><a href="">全部商品分类</a></div>
		<ul>
			<li>
				<a href="">家用电器</a><div><img src="images/erji.jpg"/></div>
			</li>
			<li>
				<a href="">手机</a>、<a href="">数码</a>、<a href="">京东通信</a><div><img src="images/erji1.jpg"/></div>
			</li>
			<li>
				<a href="">电脑</a>、<a href="">办公</a><div><img src="images/erji2.jpg"/></div>
			</li>
			<li>
				<a href="">家居</a>、<a href="">家具</a>、<a href="">家装</a>、<a href="">厨具</a><div><img src="images/erji3.jpg"/></div>
			</li>
			<li>
				<a href="">男装</a>、<a href="">女装</a>、<a href="">珠宝</a><div><img src="images/erji4.jpg"/></div>
			</li>
		</ul>
	</div>
 </body>
 <script src="js/jquery-1.12.4.js"></script>
 <script>
	  $("li").hover(
	         function () {
	             // 鼠标悬停时显示图片
	             $(this).find("div").show();
	             // 鼠标悬停时设置背景颜色为橙色
	             $(this).css("background-color", "orange");
	         },
	         function () {
	             // 鼠标离开时隐藏图片
	             $(this).find("div").hide();
	             // 鼠标离开时设置背景颜色为 #c81623
	             $(this).css("background-color", "#c81623");
	         }
	     );
 </script>
</html>
